<template>
    <div class="el_auto_input" style="postion:relative;">
        <el-autocomplete
            v-model="circlename"
            :fetch-suggestions="querySearchAsync"
            :placeholder="placeholder"
            @select="handleSelect"
        ></el-autocomplete>
        <span v-if="circleiconShow"><i class="iconfont icon-shixinxiajiantou"></i></span>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                circleList: [],
                circlename: '',
                timeout:  null,
            }
        },
        
        mounted() {
            // this.loadAll();
            //  this.circleList = this.loadAll();
        },
        watch: {
            circlename(value) {
               this.circlename = value; 
               this.$emit('circledate',value); 
            }
        },
        methods: {
            loadAll(callback) {
                let that = this;
                let access_token = window.localStorage.getItem('access_token');
                let keyword = this.circlename;
                if (!keyword) {
                    typeof callback == 'function' && callback([]);
                    return false;
                }
                var data = {
                    access_token: access_token,
                    keyword: keyword
                }
                that.$post(that.$path + '/api.php/circle/searchCircle', data).then((res)=>{
                    console.log('所有圈子',res.data);
                    if(res.code == 200) {
                        that.circleList = res.data;
                        // 后台获取的数组每一个对象必须要有一个value字段，因为autocomplete只识别value并在下拉列中显示，对象的键是改不了的，所以重新加一个value
                        for (let i = 0; i < that.circleList.length; i += 1) {
                            
                            that.circleList[i].value = that.circleList[i].c_name;    
                            delete that.circleList[i].c_name;
                        }
                        typeof callback == 'function' && callback(that.circleList);
                    }
                })
            },
            querySearchAsync(queryString, cb) {
                // var circleList = this.circleList;
                // // console.log('010',queryString);
                // var results = queryString ? circleList.filter(this.createStateFilter(queryString)) : circleList;
                // clearTimeout(this.timeout);
                // cb(results);
                // this.timeout = setTimeout(() => {
                //     cb(results);
                //     console.log('020',circleList);
                //     this.circleList = this.loadAll();
                // }, 3000 * Math.random());
                this.timeout && clearTimeout(this.timeout);
                cb([]);
                this.timeout = setTimeout(() => {
                    this.loadAll(cb);
                }, 1000);
                 
            },
            createStateFilter(queryString) {
                return (state) => {
                    // 按照这样的写法，筛选的数据只是首字匹配的列表项，而我们的需求是需要包含输入字的所有列表项，并不是只匹配首字建议，所以需要将他的方法改成下面这样，只需要筛选到字符串而不是匹配第一次出现的位置。
                    return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
                };
            },
            handleSelect(item) {
                this.circlename = item.value;
                this.$emit('circledate',item.value); 
            }
        },
        
        props: ['placeholder', 'circleiconShow']
    }
</script>
<style>
    .el-autocomplete {
        display: block !important;
    }
    .el-popper[x-placement^=bottom] {
        margin-top: 1px !important;
    }
    .el-autocomplete-suggestion {
        margin: 0 !important;
        box-shadow: none !important;
        border: 0 !important;
        left: 0 !important;
        width: 100% !important;
    }
    .el-input__inner {
        height: 1rem !important;
        line-height: 1rem !important;
        font-size: 0.3rem !important;
        color: #333 !important;
        border: 0 !important;
        border-radius: 0 !important;
        border-bottom: 1px solid #d8d8d8 !important;
    }
    .el-input.is-active .el-input__inner, .el-input__inner:focus {
        border-color: #ccc !important;
    }
    .el_auto_input .icon-shixinxiajiantou {
        line-height: 1rem;
        position: absolute;
        right: 0;
        margin-top: -1rem;
        height: 1rem;
        padding: 0 0.2rem;
        color: #999;
        font-size: 0.28rem;
    }
</style>

<style lang="scss" scoped>
    
    .vue-dropdown.default-theme {
        position: absolute;
        left:15%;
        display: none;
        width: 70%;
        margin: 0 auto;
        margin-top: 1em;
        padding: 1em;
        z-index:10;
        box-shadow: 0px 0px 10px #ccc;
        &._self-show {
            display: block!important;
        }

        .search-module {
            position: relative;
            .search-text {
                width: 100%;
                height: 30px;
                padding-right: 2em;
                padding-left:0.5em;
                border-radius: 0.5em;
                box-shadow: none;
                border: 1px solid #ccc;

                &:focus {
                    border-color: #e50838;
                }
            }

            .search-icon {
                position: absolute;
                top: 24%;
                right: 0.5em;
                color: #aaa;
            }

        }

        .list-module {
            max-height: 200px;
            overflow-y: auto;
            li {
                &._self-hide {
                    display: none;
                }
                margin-top: 0.5em;
                padding: 0.5em;
                &:hover {
                    cursor:pointer;
                    color: #fff;
                    background: transparent;
                }
            }
        }
    }
    .tip__nodata {
        font-size: 12px;
        margin-top: 1em;
    }
</style>